<template>
	<!--赛事-->
	<div class="hello">
		<div class="title">比赛</div>
		<!--搜索-->
		<div class="pisoo">
			<mt-search v-model="value"></mt-search>
		</div>
		 <!--比赛记录-->
		 <div class="FNE">
		 	<div class="Notbeginning">
		 		<div  @click="details">
		 			<p><span>【北京】2018‘百千万工程’海淀区围棋段位赛</span></p>
					<p>2018年4月29日至2018你4月30日</p>
					<p>北京市海淀区培黎职业学校</p>	
		 		</div>
			<div class="icon_bao">报名中</div>
		</div>
		<div class="Enrolment">
			<div @click="xiang">
			<p><span>【天津】天津百灵杯</span></p>
			<p>2018年4月29日至2018你4月30日</p>
			<p>北京市海淀区培黎职业学校</p>
			</div>
			
			<div class="icon_yi">已结束</div>
		</div>
		<div class="Finished">
			<div @click="xiang">
				<p><span>【天津】天津百灵杯</span></p>
			<p>2018年4月29日至2018你4月30日</p>
			<p>北京市海淀区培黎职业学校</p>
			</div>
			<div class="icon_yi">已结束</div>
		</div>
	</div>
		 
	</div>
</template>
<script>
	export default{
		data:function(){
			return{
				value:''
			}
		},
		methods:{
			details:function(){
				this.$router.push({path:'/details'})		
			},
			xiang:function(){
				this.$router.push({path:'/xiang'})		
			}
		}
	}
	
	
</script>

<style scoped="scoped">
	*{
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
	}
	.title{
		font-size: 0.36rem;
		width: 100%;
		height: auto;
		height: 0.5rem;
		color: black;
		font-family: "微软雅黑";
		font-weight: bold;
		line-height: 0.7rem;
		/*background-color:darkslategrey;*/
		text-align: center;
	}
	.inp_suo{
		width: 86%;
		height: 0.5rem;
		margin-top:0.1rem;
		background: url(../../assets/搜索.png);
		background-repeat: no-repeat;
		background-size: 0.35rem 0.35rem;
		background-position: left center; 
		border: solid #CCCCCC 1px;
		padding-left: 0.5rem;
		margin: 0 auto;
		font-size: 0.2rem;
		display: block;
		margin-top: 0.2rem;
		background-color: rgba(242, 242, 242, 1);
		border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
	}
	.pisoo{
		/*position: relative;*/
		width: 92%;
		height: 1rem;
		margin-left: 0.3rem;
		font-size: 0.24rem;
		margin-top: 0.2rem;
		border: none;
		outline: none;
	}
	.img_cuo{
		width: 0.4rem;
		height: 0.4rem;
		position: absolute;
		right: 0.35rem;
		top: 0.1rem;
	}
	
	
	
	.Notbeginning{
		width: 92%;
		height: 2rem;
		border: solid #CCCCCC 0.01rem;
		margin: 0 auto;
		margin-top:0.3rem ;
		background-color: rgba(242, 242, 242, 1);
		border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
		position: relative;
	}
	.icon_wei{
		width: 1rem;
		height: 0.4rem;
		font-size: 0.2rem;
		background-color: orange;
		text-align: center;
		color: white;
		line-height: 0.4rem;
		border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
		position: absolute;
		right: 0.2rem;
		top: 0.15rem;
	}
	.icon_bao{
		width: 1rem;
		height: 0.4rem;
		font-size: 0.2rem;
		background-color: dodgerblue;
		text-align: center;
		color: #F5F5F5;
		line-height: 0.4rem;
		border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
		position: absolute;
		right: 0.2rem;
		top: 0.15rem;
	}
	.icon_yi{
		width: 1rem;
		height: 0.4rem;
		font-size: 0.2rem;
		background-color:#CCCCCC;
		text-align: center;
		color: white;
		line-height: 0.4rem;
		border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
		position: absolute;
		right: 0.2rem;
		top: 0.15rem;
	}
	.Notbeginning p{
		font-size: 0.24rem;
		color: #CCCCCC;
		margin-top:0.22rem ;
		margin-left: 0.2rem;
		
	}
	.Enrolment{
		width: 92%;
		height: 2rem;
		border: solid #CCCCCC 0.01rem;
		margin: 0 auto;
		margin-top:0.3rem ;
		position: relative;
		border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
	}
	.Enrolment p{
		font-size: 0.24rem;
		color: #CCCCCC;
		margin-top:0.22rem ;
		margin-left: 0.2rem;
	}
	.Finished{
		width: 92%;
		height: 2rem;
		border: solid #CCCCCC 0.01rem;
		margin: 0 auto;
		margin-top:0.3rem ;
		position: relative;
		border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;

	}
	.Finished p{
		font-size: 0.24rem;
		color: #CCCCCC;
		margin-top:0.22rem ;
		margin-left: 0.2rem;
	}
	p span{
		color: black;
	}
</style>